<!--
 * @Author: LBH 1336709799@qq.com
 * @Date: 2024-11-14 15:37:51
 * @LastEditors: LBH 1336709799@qq.com
 * @LastEditTime: 2024-11-14 18:02:07
 * @FilePath: \用户订单的物流信息\userorder\src\components\MyLogistics.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div>
    <h2>物流相关信息</h2>
      <div class="logistics-info-header">
        <div class="logistics-info-header-left">
          <span :class="list[0].classArr">{{ list[0].cont }}</span>
          <span class="logistics-company">{{ orderInfo.logisticsCompany }}</span>
          <span class="logistics-no">{{ orderInfo.logisticsNo }}</span>
        </div>
      </div>
      <ul class="logistics-info-list">
        <li v-for="(item,index) in orderInfo.logisticsInfo" :key = "index">
          <div class="logistics-info-list-time">{{ item.time }}</div>
          <div class="logistics-info-list-content">{{ item.content }}</div>
        </li>
      </ul>
      <button v-judge="orderInfo">查看物流详情</button>
</div>
</template>

<script>
export default{
  directives:{
    judge:{
      inserted(el,binding){
        el.addEventListener("click",function(){
          if(
            binding.value.role == 'admin' ||
            binding.value.role == 'zhangsan' ||
            binding.value.role == 'list'
          ){
            alert('你可以查看')
          }else{
            alert('你不能查看')
          }
        })
      }
    }
  },
  props:['orderInfo'],
  data(){
    return{
      list:[]
    }
  },
  created(){
    let info = this.orderInfo.logisticsStatus
    switch(info){
      case 0:
        this.list.push({cont:'未发货',classArr: 'blue logistics-status'});
        break;
      case 1:
        this.list.push({cont:'已发货',classArr: 'undo logistics-status'});
        break;
      case 2:
        this.list.push({cont:'已签收',classArr: 'error logistics-status'});
        break;
      case 3:
        this.list.push({cont:'未签收',classArr: 'right logistics-status'});
        break;
      default:
        console.log(404)
    }
  }
}
</script>

<style scoped>
.blue {
  color: blue;
}
.undo {
  color: #ccc;
}
.error {
  color: red;
}
.right {
  color: green;
}
.logistics-company{
  margin-left: 10px;
}
.logistics-no{
  margin-left: 10px;
}
</style>
